<template>
  <!-- 主要内容区域 -->
  <slot />
  
  <!-- 回到顶部按钮 -->
  <van-back-top right="15px" bottom="10vh"/>
  
  <!-- 底部导航栏 -->
  <van-tabbar v-model="tabbarActive">
    <van-tabbar-item icon="newspaper-o" to="/">新闻</van-tabbar-item>
    <van-tabbar-item icon="coupon-o" to="/government">政务</van-tabbar-item> 
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'nuxt/app';

// 获取路由实例
const route = useRoute();

// 定义底部导航栏的活动标签索引
const tabbarActive = ref(0);

// 组件挂载时，根据当前路由更新活动标签
onMounted(() => {
  updateActiveTab();
});

// 监听路由变化，更新活动标签
const updateActiveTab = () => {
  const path = route.path;
  if (path === '/') {
    tabbarActive.value = 0;
  } else if (path === '/government' || path.startsWith('/government/')) {
    tabbarActive.value = 1;
  } else if (path === '/download') {
    tabbarActive.value = 2;
  }
};

// 监听路由变化，确保活动标签与当前页面一致
useRoute().path;
watch(() => route.path, () => {
  updateActiveTab();
});
</script>

<style scoped>
/* 确保页面内容不会被底部导航栏遮挡 */
:deep(.van-tabbar) {
  position: fixed;
  bottom: 0;
}
</style>